<template>
	<view class="main-content">
		<u-navbar :is-back="false" :immersive="true" :border-bottom="false" :background="{background: 'rgba(0,0,0,0)'}">
			<u-icon name="home" style="background: rgba(0,0,0,.5);color: #fff;padding: 20rpx;border-radius: 100rpx;margin-left: 20rpx;" @click="goPage('/pages/index/index')"></u-icon>
		</u-navbar>
		<view class="swiper-display-area bg-white">
			<swipers :pid="1" height="422rpx" radius="0"></swipers>
		</view>
		<view class="shop-information-display-area">
			<view class="row">
				<view class="left-content">
					<text class="title line1" v-text="shopInformation.name"></text>
					<view class="basic-information" v-html="shopInformation.remark"></view>
					<view class="xs" style="color: #7c7c7c;">
						<u-icon name="star-fill" color="#fd502f"></u-icon>
						<text style="color:#fd502f;padding-right: 10rpx;">
							{{shopInformation.evaluation_score}}
						</text>
						月售{{shopInformation.month_order_count}}&nbsp;&nbsp;
							配送时间约{{shopInformation.delivery_time}}分钟
					</view>
				</view>
				<view class="right-content">
					<image class="logo" :src="shopInformation.logo"></image>
				</view>
			</view>
			<view class="xs line1" style="color: #7c7c7c;">公告：{{shopInformation.announcement}}</view>
			<image class="mt10" src="https://image.leyuanyinyong.cn/uploads/images/202108180906386dc931213.png" style="width: 240rpx;" mode="widthFix"></image>
		</view>
		<view class="body">
			<!-- <u-sticky :offset-top="0" class="bg-white" @fixed="tabsLocationFixed" @unfixed="tabsLocationUnfixed"> -->
			<view class="tabs-area bg-white">
				<u-tabs-swiper bg-color="rgba(0,0,0,0)" :bold="false" :height="70" :font-size="28" :bar-height="8"
					inactive-color="#686868"
					:bar-style="{background:'#00a4f8','border-radius':'10rpx','overflow':'hidden'}" active-color="#000"
					ref="uTabs" :list="tabsList" :current="tabsSort" bar-width="20" :item-width="20"
					@change="tabsChange" :is-scroll="false" swiperWidth="750"></u-tabs-swiper>
			</view>
			<swiper :current="swiperSort" @transition="transition" @animationfinish="animationfinish"
				class="information">
				<swiper-item class="swiper-item bg-white" style="margin-top: 20rpx;"
					v-bind:class="{'overflow-y-auto':tabsFixedStatus}">
					<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view"
						:scroll-top="scrollTop" :scroll-into-view="itemId">
						<view v-for="(item,index) in tabbar" :key="index" class="u-tab-item"
							:class="[current == index ? 'u-tab-item-active' : '']" @tap.stop="swichMenu(index)">
							<text class="u-line-1">{{item.name}}</text>
						</view>
					</scroll-view>
					<scroll-view :scroll-top="scrollRightTop" scroll-y scroll-with-animation class="right-box"
						@scroll="rightScroll">
						<view class="swiper-display-area bg-white"
							style="padding: 10rpx;margin: 20rpx 0;border-radius: 20rpx;">
							<u-swiper :list="swiperList" :height="150" bg-color="#ffffff" mode="none" @click="clickMerchantSlideshow"></u-swiper>
						</view>
						<view class="page-view">
							<view class="class-item" :id="'item' + index" v-for="(item , index) in tabbar" :key="index">
								<view class="item-title">
									<text>{{item.name}}</text>
								</view>
								<view class="item-container">
									<navigator v-for="(item1, index1) in item.lists" :key="index1" class="thumb-box" hover-class="none" open-type="navigate" :url="'/pages/goods_details/goods_details?id=' + item1.id">
										<image class="item-menu-image" :src="item1.image" mode=""></image>
										<view class="right-content">
											<view class="item-menu-name">{{item1.name}}</view>
											<view class="primary mt10" style="display: block;width: 100%;text-align: left;">
												<text class="price-format">
													<text style="font-size: 12px;color: #fd502f;">¥</text>
													<text style="font-size: 17px; color: #fd502f;font-weight: bold;padding-left: 10rpx;">{{item1.min_price}}</text>
													<price-format :first-size="28" :second-size="24" :subscript-size="24"
														:price="item1.price" :weight="500" color="#c8c9cc" class="line-through ml10" v-if="item1.price > 0"></price-format>
												</text>
												<u-button v-if="item1.spec_type == 2" size="mini" :hair-line="false" @click="selectSpec(item1.id)" hover-class="none" :custom-style="specificationButtonStyle">
													<u-badge type="error" v-for="(item2,index2) in cartLists" v-if="item2.product_id == item1.id" :count="item2.number" :absolute="true" :offset="badgeOffset"></u-badge>
													选规格
												</u-button>
												<u-button v-if="item1.spec_type == 1" size="mini" :hair-line="false" @click="addCartFun(item1.id)" hover-class="none" :custom-style="specificationButtonStyleTow">
													<u-badge type="error" v-for="(item2,index2) in cartLists" v-if="item2.product_id == item1.id" :count="item2.number" :absolute="true" :offset="badgeOffset"></u-badge>
													<u-icon name="plus"></u-icon>
												</u-button>
											</view>
										</view>
									</navigator>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				<!-- <swiper-item class="swiper-item" style="background-color: #f6f6f6;" -->
					v-bind:class="{'overflow-y-auto':tabsFixedStatus}">
					<view class="comment-information bg-white">
						<view class="comment" v-for="(res, index) in commentList" :key="res.id">
							<view class="left">
								<image :src="res.url" mode="aspectFill"></image>
							</view>
							<view class="right">
								<view class="top">
									<view class="name">{{ res.name }}</view>
								</view>
								<view class="content">{{ res.contentText }}</view>
								<view class="reply-box">
									<view class="item" v-for="(item, index) in res.replyList" :key="item.index">
										<view class="username">{{ item.name }}</view>
										<view class="text">{{ item.contentStr }}</view>
									</view>
									<view class="all-reply" @tap="toAllReply" v-if="res.replyList != undefined">
										共{{ res.allReply }}条回复
										<u-icon class="more" name="arrow-right" :size="26"></u-icon>
									</view>
								</view>
								<view class="bottom">
									{{ res.date }}
									<!-- <view class="reply">回复</view> -->
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item class="swiper-item" style="background: #f6f6f6;">
					<view class="bg-white shop-information-title">
						店铺信息
					</view>
					<view class="merchants-photos bg-white">
						<image v-for="(val,key) in shopInformation.pictures" class="photos" :src="val.image_show_site" mode=""></image>
					</view>
					
					<view class="merchants-information-item bg-white">
						<text class="title">门店地址</text>
						<text class="hint">{{shopInformation.province_name}}{{shopInformation.city_name}}{{shopInformation.address}}</text>
					</view>
					
					<view class="merchants-information-item bg-white">
						<text class="title">门店电话</text>
						<text class="hint" v-text="shopInformation.tel" @click="makePhone(shopInformation.tel)"></text>
					</view>
					
					<view class="merchants-information-item bg-white">
						<text class="title">配送时间</text>
						<text class="hint">{{shopInformation.delivery_start_time}} - {{shopInformation.delivery_end_time}}</text>
					</view>
					
					<view class="merchants-information-item bg-white">
						<text class="title">配送服务</text>
						<text class="hint">由商家提供配送服务</text>
					</view>
					<u-gap height="20" bg-color="#f5f5f5"></u-gap>
					<view class="bg-white shop-information-title">
						店铺评分
					</view>
					<view class="row-between bg-white score-display-area">
						<view class="item">
							<view class="number">
								{{shopInformation.evaluation_score}}
							</view>
							<view class="title">
								综合评分
							</view>
						</view>
						<view class="item">
							<view class="number">
								0
							</view>
							<view class="title">
								评价总数
							</view>
						</view>
						<view class="item">
							<view class="number">
								--
							</view>
							<view class="title">
								好评率
							</view>
						</view>
					</view>
					<u-gap height="20" bg-color="#f5f5f5"></u-gap>
					<view class="bg-white shop-information-title">
						店铺介绍
					</view>
					<u-parse class="bg-white shop-introduced" :html="shopInformation.introduce"></u-parse>
				</swiper-item>
			</swiper>
		</view>
		<spec-popup :show="showSpec" :product="productDetail" @close="showSpec = false" :show-add="true" :show-buy="false"
			:showConfirm="false" @buynow="onBuy" @addcart="onAddCart" @change="onChangeGoods" @confirm="onConfirm">
		</spec-popup>
		<view class="footer acea-row row-between-wrapper" v-show="swiperSort == 0">
			<view class="shopping-basket">
				<u-badge type="error" v-if="cartProductNumber >= 1" :count="cartProductNumber" style="right: 0;">
				</u-badge>
				<u-image width="124rpx" height="106rpx" v-if="cartProductNumber >= 1"
					src="https://image.leyuanyinyong.cn/uploads/images/202107280910076581d8318.png"
					@tap="cartProductDisplayStatus = true"></u-image>
				<u-image width="124rpx" height="106rpx" v-if="cartProductNumber <= 0"
					src="https://image.leyuanyinyong.cn/uploads/images/20210728091007b28c38394.png"></u-image>
			</view>
			<view class="money">
				￥<text class="num" v-text="cartProductMoney"></text>
			</view>
			<view class="bnt" v-if="cartProductNumber >= 1 && shopInformation.minimum_consumption < cartProductMoney" @tap="goToConfirm">
				去结算
			</view>
			<view class="bnt-tow" v-if="cartProductNumber <= 0">
				请选择产品
			</view>
			<view class="bnt-tow" v-if="cartProductMoney > 0 && shopInformation.minimum_consumption > cartProductMoney">
				还差{{(shopInformation.minimum_consumption - cartProductMoney).toFixed(2)}}元
			</view>
		</view>

		<u-popup v-model="cartProductDisplayStatus" mode="bottom" border-radius="10rpx"
			:height="cartProductDisplayHeight + 'px'">

			<view class="cart-list" style="padding-bottom: 200rpx;">
				<view class="title ">
					<view class="name">
						已选商品
					</view>
					<view class="del acea-row row-middle" @click="empty_shopping_cart">
						<u-icon name="trash"></u-icon>
						清空
					</view>
				</view>
				<view v-for="(item, index) in cartLists" :key="index" class="cart-item bg-white"
					:class="{invalid: item.cart_status != 0}">
					<view class="select row-between sm muted" v-if="item.cart_status != 0">
						已失效
						<view :data-cartid="item.cart_id" @click="changeDelPopup(item.cart_id)">
							<image class="icon-xl" src="/static/images/icon_del.png" />
						</view>
					</view>
					<view class="row" style="padding: 20rpx" @click="goPage('/pages/goods_details/goods_details?id='+ item.goods_id)">
						<custom-image width="180rpx" height="180rpx" radius="10rpx" class="goods-img mr20" lazy-load
							:src="item.img" />
						<view class="info" style="flex: 1">
							<view class="line2 nr">{{item.name}}</view>
							<view class="muted xs line1 mt10">
								{{item.spec_value_str}}
							</view>
							<view class="row-between mt20">
								<view class="price row primary">
									<price-format :price="item.price" color="#fd502f" :firstSize="32" :secondSize="32"
										:showSubscript="true" :subscriptSize="32"></price-format>
								</view>
								<view class="cartNum" @tap.stop="">
									<u-number-box :disabled="item.cart_status != 0" v-model="item.goods_num" :min="0"
										async-change integer @change="countChange($event, item.cart_id)" />
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<u-toast ref="uToast" />
		<u-modal v-model="hint_status" :show-cancel-button="true" confirm-text="确定" :title="hint_title" @cancel="hintCancel" @confirm="hintConfirm" >
			<view class="u-update-content">
				<rich-text :nodes="hint_content"></rich-text>
			</view>
		</u-modal>
	</view>
</template>
<script>
	import {
		getCartList,
		getProductDetail,
		changeGoodsCount,
		addCart,
		getPoster,
		getCartNum,
		deleteGoods
	} from '@/api/store';
	import {
		getQueryMerchantId
	} from '@/api/user';
	import {
		getMerchantInformation,
		ProductCategory
	} from '@/api/merchant';
	import {
		mapActions,
		mapGetters
	} from 'vuex';
	export default {
			data() {
				return {
					cartProductNumber: 0,
					cartProductMoney: '0.00',
					cartProductDisplayHeight: 264,
					cartLists: [],
					cartProductDisplayStatus: false,
					showSpec: false,
					productDetail: {},
					price: '0.00',
					specificationButtonStyle: {
						'border-radius': '50px',
						'line-height': '23px',
						'height': '23px',
						'float': 'right',
						'background-color': '#1db0fc',
						'color': '#fff',
						'border-color': '#1db0fc',
						'margin-right': '20rpx'
					},
					specificationButtonStyleTow:{
						'border-radius': '50px',
						'line-height': '23px',
						'height': '23px',
						'float': 'right',
						'background-color': '#1db0fc',
						'color': '#fff',
						'border-color': '#1db0fc',
						'margin-right': '20rpx',
						'padding':'0 8rpx'
					},
					badgeOffset: [-12, -12],
					swiperList: [],
					shopInformation: {},
					tabsList: [{
							name: '购物'
						},
						// {
						// 	name: '评价'
						// },
						{
							name: '商家'
						}
					],
					tabsSort: 0,
					swiperSort: 0,
					tabsFixedStatus: false,
					scrollTop: 0, //tab标题的滚动条位置
					oldScrollTop: 0,
					itemId: '', // 栏目右边scroll-view用于滚动的id
					tabbar: [],
					scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度
					current: 0, // 预设当前项的值
					commentList: [],
					merchant_id: 0,
					arr: [],
					hint_status:false,
					hint_title:'',
					hint_content:'',
				}
			},
			onLoad(option) {
				uni.hideTabBar()
				var _this = this;
				getQueryMerchantId().then(res => {
					if (res.code == 1) {
						_this.merchant_id = res.data.merchant_id;
						getMerchantInformation({
							id: _this.merchant_id
						}).then(res => {
							if (res.code == 1) {
								// #ifdef H5
								window.document.title = res.data.name;
								// #endif
								_this.shopInformation = res.data;
								_this.swiperList = res.data.slideshow;
								if(_this.shopInformation.is_open == 0){
									_this.hint_status = true;
									_this.hint_title = '门店已关门';
									_this.hint_content = '';
								}
								
								this.getCartListFun();
							}
						})
						
						ProductCategory({
							merchant_id: _this.merchant_id
						}).then(res => {
							if (res.code == 1) {
								_this.tabbar = res.data;
								this.getMenuItemTop();
							}
						})
					}
				})
	
				this.getComment();
				
				
			},
			methods: {
				...mapActions(['getCartNum']),
				// 点击左边的栏目切换
				async swichMenu(index) {
					if (this.arr.length == 0) {
						await this.getMenuItemTop();
					}
					if (index == this.current) return;
					this.scrollRightTop = this.oldScrollTop;
					this.$nextTick(function() {
						this.scrollRightTop = this.arr[index];
						this.current = index;
						this.leftMenuStatus(index);
					})
				},
				hintCancel() {
					this.closeModal();
				},
				hintConfirm() {
					this.closeModal();
				},
				closeModal() {
					uni.navigateBack();
				},
				// 获取右边菜单每个item到顶部的距离
				getMenuItemTop() {
					var _this = this;
					new Promise(resolve => {
						let selectorQuery = uni.createSelectorQuery();
						selectorQuery.selectAll('.class-item').boundingClientRect((rects) => {
							// 如果节点尚未生成，rects值为[](因为用selectAll，所以返回的是数组)，循环调用执行
							if (!rects.length) {
								setTimeout(() => {
									_this.getMenuItemTop();
								}, 10);
								return;
							}
							rects.forEach((rect) => {
								// 这里减去rects[0].top，是因为第一项顶部可能不是贴到导航栏(比如有个搜索框的情况)
								_this.arr.push(rect.top - rects[0].top + 95);
								resolve();
							})
						}).exec()
					})
				},
				// 获取一个目标元素的高度
				getElRect(elClass, dataVal) {
					new Promise((resolve, reject) => {
						const query = uni.createSelectorQuery().in(this);
						query.select('.' + elClass).fields({
							size: true
						}, res => {
							// 如果节点尚未生成，res值为null，循环调用执行
							if (!res) {
								setTimeout(() => {
									this.getElRect(elClass);
								}, 10);
								return;
							}
							this[dataVal] = res.height;
							resolve();
						}).exec();
					})
				},
				// 设置左边菜单的滚动状态
				async leftMenuStatus(index) {
					this.current = index;
					// 如果为0，意味着尚未初始化
					if (this.menuHeight == 0 || this.menuItemHeight == 0) {
						await this.getElRect('menu-scroll-view', 'menuHeight');
						await this.getElRect('u-tab-item', 'menuItemHeight');
					}
					// 将菜单活动item垂直居中
					this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
				},
				// 右边菜单滚动
				async rightScroll(e) {
					this.oldScrollTop = e.detail.scrollTop;
					if (this.arr.length == 0) {
						await this.getMenuItemTop();
					}
					if (this.timer) return;
					if (!this.menuHeight) {
						await this.getElRect('menu-scroll-view', 'menuHeight');
					}
					setTimeout(() => { // 节流
						this.timer = null;
						// scrollHeight为右边菜单垂直中点位置
						let scrollHeight = e.detail.scrollTop + this.menuHeight / 2;
						for (let i = 0; i < this.arr.length; i++) {
							let height1 = this.arr[i];
							let height2 = this.arr[i + 1];
							// 如果不存在height2，意味着数据循环已经到了最后一个，设置左边菜单为最后一项即可
							if (!height2 || scrollHeight >= height1 && scrollHeight < height2) {
								this.leftMenuStatus(i);
								return;
							}
						}
					}, 10)
				},
				selectSpec(product_id) {
					var _this = this;
					getProductDetail({
						id: product_id
					}).then(res => {
						if (res.code == 1) {
							_this.productDetail = res.data
							_this.showSpec = true
						}
					})
				},
				addCartFun(product_id) {
					var _this = this;
					getProductDetail({
						id: product_id
					}).then(res => {
						var product_information = res.data;
						if (res.code == 1) {
							if(res.data.product_item[0].id){
								addCart({
									item_id:res.data.product_item[0].id,
									product_num:1
								}).then(res => {
									if (res.code == 1) {
										_this.getCartListFun();
									}
								})
							}
						}
					})
				},
				goPage(url) {
					if(url == '/pages/index/index'){
						uni.switchTab({
							url
						});
						return;
					}
					uni.navigateTo({
						url
					})
				},
				onChangeGoods(e) {
					this.checkedGoods = e.detail;
				},
				getComment() {
					this.commentList = [];
				},
				tabsChange(index) {
					this.swiperSort = index;
				},
				transition(e) {
					let dx = e.detail.dx;
					this.$refs.uTabs.setDx(dx);
				},
				getCartListFun() {
					var _this = this;
					getCartList({
						merchant_id:_this.merchant_id
					}).then(res => {
						uni.stopPullDownRefresh({
							success: res => {}
						});
						if (res.code == 1) {
							_this.cartLists = res.data.lists;
							if (res.data.lists.length > 3) {
								_this.cartProductDisplayHeight = 484;
							} else {
								_this.cartProductDisplayHeight = 154 + (res.data.lists.length * 110);
							}
							_this.cartProductMoney = res.data.total_amount;
							_this.cartProductNumber = res.data.total_num;
						}
					});
				},
				animationfinish(e) {
					let current = e.detail.current;
					this.$refs.uTabs.setFinishCurrent(current);
					this.swiperSort = current;
					this.tabsSort = current;
				},
				async onAddCart(e) {
					let {
						id,
						goodsNum
					} = e.detail;
	
					if (this.goodsType == 2) {
						// 拼团单独购买
						let goods = [{
							item_id: id,
							num: goodsNum
						}];
						uni.navigateTo({
							url: '/pages/confirm_order/confirm_order?data=' + encodeURIComponent((JSON.stringify({
								goods
							})))
						})
						return
					}
					const {
						code,
						data,
						msg
					} = await addCart({
						item_id: id,
						goods_num: goodsNum
					});
					if (code == 1) {
						this.getCartNum();
						this.getCartListFun();
						this.$toast({
							title: msg,
							icon: 'success'
						});
						this.showSpec = false;
					}
				},
				empty_shopping_cart() {
					var _this = this;
					var i = 0;
					for (var key in _this.cartLists) {
						i++;
						deleteGoods({
							cart_id: _this.cartLists[key].cart_id
						}).then(res => {
							if (res.code == 1) {
								if (i == _this.cartLists.length) {
									_this.$refs.uToast.show({
										title: '清空成功',
										type: 'success'
									})
									_this.cartProductDisplayStatus = false;
									_this.getCartListFun();
								}
							}
						})
					}
				},
				clickMerchantSlideshow(e){
					// uni.navigateTo({
					// 	url:this.swiperList[e].link
					// })
				},
				countChange(number, cartId) {
					var _this = this;
					let cartid = cartId;
					if (number == 0) {
						deleteGoods({
							cart_id: cartid
						}).then(res => {
							if (res.code == 1) {
								for (var key in _this.cartLists) {
									if (_this.cartLists[key].cart_id == cartid) {
										delete _this.cartLists[key]
										_this.getCartListFun();
									}
								}
								_this.$refs.uToast.show({
									title: '删除成功',
									type: 'success'
								})
							} else {
								_this.$refs.uToast.show({
									title: '删除失败',
									type: 'error'
								})
							}
						})
						return false;
					}
					changeGoodsCount({
						cart_id: cartid,
						goods_num: number
					}).then(res => {
						if (res.code == 1) {
							this.getCartListFun();
						} else {
							this.getCartListFun();
						}
					})
				},
				goToConfirm() {
					let {
						cartLists
					} = this;
					let products = [];
					cartLists.forEach(item => {
						if (item.selected && item.cart_status == 0) {
							products.push({
								item_id: item.item_id,
								number: item.number
							});
						}
					});
					if (products.length == 0) return this.$toast({
						title: '您还没有选择商品哦'
					});
					uni.navigateTo({
						url: '/pages/confirm_order/confirm_order?data=' + encodeURIComponent((JSON.stringify({
							products,
							type: 'cart'
						}))),
					})
				},
				makePhone(phone) {
					uni.makePhoneCall({
						phoneNumber: phone //仅为示例
					});
				}
			}
		}
</script>
<style lang="scss">
	uni-page-body,
	page {
		height: 100%;
	}
	
	.main-content {
		height: 100%;

		.header {
			position: absolute;
			height: 88rpx;
			line-height: 88rpx;
			width: 100%;
			top: 0;
			z-index: 100;
			padding: 0 20rpx;
		}

		.shop-information-display-area {
			width: 100%;
			// padding: 20rpx 30rpx;
			padding: 0 30rpx;
			padding-bottom: 0;
			margin-top: -2.5vh;
			background-color: #FFFFFF;
			border-radius: 20rpx 20rpx 0 0;
			position: relative;

			.row {
				.left-content {
					width: calc(100% - 60px);
					margin-right: 20rpx;

					.title {
						width: 100%;
						font-weight: bold;
						font-size: 30rpx;
						display: inline-block;
						padding-bottom: 10rpx;
						color: #1c1b19;
					}

					.basic-information {
						width: 100%;
						font-size: 20rpx;
					}
				}

				.right-content {
					width: 140rpx;
					height: 140rpx;

					.logo {
						width: 120rpx;
						height: 120rpx;
						border-radius: 10rpx;
						margin-top: -2vh;
					}
				}
			}
		}

		.body {
			height: calc(100% - 30px);
			padding-bottom: 20rpx;
			background-color: #ffffff;

			.tabs-area {
				padding-right: 55%;
				border-bottom: 2rpx solid #eee;
				// margin-bottom: 10rpx;
				padding-bottom: 10rpx;
			}

			.information {
				height: 100%;

				.swiper-item {
					&:first-child {
						display: flex;

						.menu-scroll-view {
							// border-top: 20rpx solid #eee;
							background-color: #f7f7f7;
							font-size: 13px;
							color: #424242;
						}
					}
				}

				.u-tab-view {
					width: 200rpx;
					height: 100%;
				}

				.right-box {
					width: calc(100% - 80px);
					padding: 0 20rpx 0 20rpx;
					background-color: #fafafa;


					.item-title {
						font-size: 26rpx;
						color: $u-main-color;
						font-weight: bold;
					}

					.class-item {
						margin-bottom: 30rpx;
						background-color: #fff;
						padding: 16rpx;
						border-radius: 8rpx;

						&:last-child {
							min-height: 100vh;
						}
					}

					.thumb-box {
						width: 100%;
						display: flex;
						margin-top: 30rpx;

						&:first-child {
							margin-top: 20rpx;
						}

						.item-menu-image {
							width: 140rpx;
							height: 140rpx;
							border-radius: 20rpx;
						}


						.right-content {
							width: calc(100% - 70px);
							padding-left: 20rpx;

							.item-menu-name {
								width: 100%;
								font-weight: normal;
								font-size: 28rpx;
								color: $u-main-color;
								font-weight: bold;
								padding-top: 20rpx;
								display: block;
								text-align: left;
								text-overflow: -o-ellipsis-lastline;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-line-clamp: 2;
								line-clamp: 2;
								-webkit-box-orient: vertical;
								margin-bottom: 10px;
								min-height: 92rpx;
							}
						}
					}
				}

				.u-tab-item {
					height: 80rpx;
					background: #f6f6f6;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 26rpx;
					color: #444;
					font-weight: 400;
					line-height: 1;
				}

				.u-tab-item-active {
					background-color: #fff;
					width: 100%;
					text-align: center;
					color: #1db0fc;
					font-weight: 500;
					position: relative;
					height: 45px;
					font-size: 13px;

					&::after {
						content: "";
						position: absolute;
						width: 3px;
						height: 24px;
						background: #1db0fc;
						-webkit-border-radius: 0 2px 2px 0;
						border-radius: 0 2px 2px 0;
						left: 0;
					}
				}
			}
		}

		.comment-information {
			width: 98%;
			margin: 10rpx auto 0;
			border-radius: 20rpx;

			.comment {
				display: flex;
				padding: 30rpx;

				.left {
					image {
						width: 64rpx;
						height: 64rpx;
						border-radius: 50%;
						background-color: #f2f2f2;
					}
				}

				.right {
					flex: 1;
					padding-left: 20rpx;
					font-size: 30rpx;

					.top {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 10rpx;

						.name {
							color: #00a4f8;
						}

						.like {
							display: flex;
							align-items: center;
							color: #9a9a9a;
							font-size: 26rpx;

							.num {
								margin-right: 4rpx;
								color: #9a9a9a;
							}
						}

						.highlight {
							color: #00a4f8;

							.num {
								color: #00a4f8;
							}
						}
					}

					.content {
						margin-bottom: 10rpx;
					}

					.reply-box {
						background-color: rgb(242, 242, 242);
						border-radius: 12rpx;

						.item {
							padding: 20rpx;
							border-bottom: solid 2rpx $u-border-color;

							.username {
								font-size: 24rpx;
								color: #999999;
							}
						}

						.all-reply {
							padding: 20rpx;
							display: flex;
							color: #00a4f8;
							align-items: center;

							.more {
								margin-left: 6rpx;
							}
						}
					}

					.bottom {
						margin-top: 20rpx;
						display: flex;
						font-size: 24rpx;
						color: #9a9a9a;

						.reply {
							color: #00a4f8;
							margin-left: 10rpx;
						}
					}
				}
			}
		}

		.store-details-display-area {
			padding: 30rpx;

			.left-content-display-area {
				flex: 1;
				border-right: 1px solid #eee;
				margin-right: 20px;

				.name {
					font-weight: bold;
					display: block;
					padding-bottom: 3px;
				}

				.site {
					font-size: 12px;
				}
			}

		}

		.shop-information-title {
			height: 90rpx;
			line-height: 90rpx;
			color: #333;
			font-size: 30rpx;
			font-weight: 700;
			padding-left: 30rpx;
		}
		
		.merchants-information-item{
			min-height: 90rpx;
			display: flex;
			flex-direction: row;
			padding: 26rpx 0;
			padding-left: 30rpx;
			font-size: 28rpx;
			color: #333;
			box-sizing: border-box;
			
			.hint{
				flex-grow: 1;
				flex-shrink: 1;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-left: 28rpx;
				margin-right: 30rpx;
			}
		}
		
		.score-display-area{
			padding: 32rpx 0;
			
			.item{
				width: 33.33%;
				text-align: center;
				
				&:first-child{
					.number{
						color: rgb(255, 134, 0);
					}
				}
				
				.number{
					font-size: 30rpx;
				}
				
				.title{
					margin-top: 20rpx;
					font-size: 24rpx;
				}
			}
		}

		.merchants-photos {
			justify-content: space-between;
			display: flex;
			padding: 0 30rpx;
			padding-bottom: 20rpx;
			justify-content: space-between;
			flex-wrap: wrap;

			.photos {
				width: 180rpx;
				height: 140rpx;
				border-radius: 10rpx;
				flex-grow: 0;
				flex-shrink: 0;
				margin-right: 16rpx;
				background-position: 50%;
				background-size: cover;
			}
		}

		.footer {
			width: 90%;
			position: fixed;
			left: 50%;
			transform: translateX(-50%);
			bottom: 20px;
			background-color: #282828;
			z-index: 1;
			padding-left: 30rpx;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
			height: 88rpx;
			border-radius: 60rpx;
			display: flex;

			.shopping-basket {
				position: relative;
				margin-top: -40rpx;
			}

			.money {
				font-size: 13px;
				font-weight: 700;
				margin-left: 16px;
				color: #fff;
				flex: 1;
				line-height: 88rpx;

				.num {
					font-size: 17px;
				}
			}

			.bnt,
			.bnt-tow {
				width: 180rpx;
				height: 100%;
				border-radius: 0 60rpx 60rpx 0;
				line-height: 88rpx;
				text-align: center;
				color: #fff;
				font-size: 28rpx;
			}

			.bnt {
				background: linear-gradient(270deg, #1db0fc, #22cafd);
			}

			.bnt-tow {
				background: #b2b2b2;
			}
		}

		.cart-list {
			.title {
				display: flex;
				height: 54px;
				line-height: 54px;
				padding: 0 30rpx;
				justify-content: space-between;

				.name {
					font-size: 14px;
					color: #282828;
					font-weight: 700;
				}

				.del {
					font-size: 13px;
					color: #a5a5a5;
				}
			}
		}
	}
</style>